<template>
    <div>
      <div class="news-img">
        <a :href="news.url">
          <img :src="news.thumbnail_pic_s" />
        </a>
      </div>
      <div class="type-news">
        <ul>
          <li
            v-for="item in typeList"
            :key="item.id"
            :class="{ typeinit: isAlive == item.id }"
            @click="change(item.id)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <NewsList :data="newsList"></NewsList>
    </div>
  </template>
  
  <script setup>
  import { reactive, ref } from "vue";
  import NewsList from "@/components/NewsList.vue";
  import axios from 'axios'
  //import axios from "axios";
  
  const typeList = [
    { id: "guonei", name: "国内" },
    { id: "guoji", name: "国际" },
    { id: "yule", name: "娱乐" },
    { id: "tiyu", name: "体育" },
    { id: "junshi", name: "军事" },
    { id: "keji", name: "科技" },
    { id: "caijing", name: "财经" },
    { id: "youxi", name: "游戏" },
    { id: "qiche", name: "汽车" },
    { id: "jiankang", name: "健康" },
  ];
  
  const isAlive = ref("guonei");
  
  const newsList = ref([]);
  
  const news = ref({});
  
  const getNews = (type) => {
    axios
      .get("/juheNews", {
        params: {
          type: type,
          key: "31600d3d29ce09b3836c69014e035577",
        },
      })
      .then((response) => {
        newsList.value = response.data.result.data;
        news.value = newsList.value[Math.floor(Math.random() * newsList.value.length)];
      })
      .catch((error) => {
        console.log(error);
      });
  }
  
  getNews("guonei");
  
  const change = (id) => {
    isAlive.value = id;
    getNews(id);
  }
  </script>
  
  <style scoped>
  .news-img img {
    width: 100%;
    height: 200px;
    display: block;
  }
  .type-news {
    width: 100%;
    margin-top: 8px;
  }
  .type-news ul {
    width: 100%;
  
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .type-news ul li {
    box-sizing: border-box;
    width: 48px;
    height: 22px;
    border: solid 1px #e03d3e;
    border-radius: 11px;
    margin: 5px 10px;
  
    font-size: 14px;
    color: #e03d3e;
  
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .typeinit {
    background-color: #e03d3e;
    color: #fff !important; /*!important：将优先级提升最高*/
  }
  </style>